<template>
    <rx-dialog style="height: 100%;" @handOk="onOk" @cancel="cancel">
        <div slot="toolbar" v-if="isTreeDialog=='YES'">
            <a-checkbox :checked="checkStrictly" @change="changeCheckStrictly">
                {{$comi18('rxDialog.cascadeSelect', '级联选择')}}
            </a-checkbox>
        </div>
        <div id="dialogContainer" class="list-container" style="height:100%;">
            <component ref="current"
                       :is="currentView"
                       :onload="onload"
                       :formdata="formdata"
                       :colsJsonStr="colsJsonStr"
                       :searchJsonStr="searchJsonStr"
                       :topBtnsJsonStr="topBtnsJsonStr"
                       :dialogVm="this">
            </component>
        </div>
    </rx-dialog>
</template>

<script>
import Vue from 'vue'
import {RxDialog, Util, FormBoListPreview, PublicFunction} from "@lowcode/jpaas-common-lib";
import FormBoListExt from "./FormBoListExt";
import FullScreen from "@/views/modules/form/core/js/FullScreen";

export default {
    name: "FormBoListDialog",
    mixins:[FullScreen],
    props: ["isTreeDialog", "html", "layerid", "onload", "destroy", "formdata", "colsJsonStr", "searchJsonStr", "topBtnsJsonStr"],
    data() {
        return {
            checkStrictly: false,
            currentView: {
                template: "<div>{{$ti18('rxCommon.Loading','正在加载...')}}</div>"
            }
        }
    },
    provide(){
        return {
            //顶级列表实例对象。
            topListVm:this
        }
    },
    components: {
        RxDialog
    },
    created() {
        this.load();
    },
    methods: {
        load() {
            var template = this.$ti18('rxList.noData','无数据'), script = {};
            var templateMath = this.html.match(/<template>([\s\S]*)<\/template>/);
            if (templateMath != null) {
                template = templateMath[1];
            }
            var scriptMath = this.html.match(/<script>([\s\S]*)<\/script>/);
            if (scriptMath != null) {
                script = scriptMath[1];
                let vueJs=Util.replaceDefault(script);
                vueJs = `let sc=${vueJs};return sc;`;
                script = new Function(vueJs)();
            }
            var customDialogComponet = Vue.component('custom-dialog', {
                mixins: [FormBoListPreview, PublicFunction, FormBoListExt],
                template: template,
                ...script
            })
            this.loadLink();
            this.loadStyle();
            this.currentView = customDialogComponet;
        },
        loadLink() {
            var linkMath = this.html.match(/<link id=".*" href=".*" \/>/g);
            if (linkMath == null) {
                return;
            }
            for (var i = 0; i < linkMath.length; i++) {
                var link = linkMath[i].match(/<link id="([\s\S]*)" href="([\s\S]*)" \/>/);
                if (link) {
                    var id = link[1];
                    var newLink = document.getElementById(id);
                    if (!newLink) {
                        newLink = document.createElement('link');
                        document.getElementsByTagName('head')[0].appendChild(newLink)
                    }
                    newLink.id = id;
                    newLink.rel = "stylesheet";
                    newLink.type = "text/css";
                    newLink.href = link[2];
                }
            }
        },
        loadStyle() {
            var style = "";
            var styleMath = this.html.match(/<style scoped>([\s\S]*)<\/style>/) || this.html.match(/<style>([\s\S]*)<\/style>/);
            if (styleMath != null) {
                style = styleMath[1];
            }

            var newStyle = document.getElementById("previewStyle");
            if (!newStyle) {
                newStyle = document.createElement('style');
                document.getElementsByTagName('head')[0].appendChild(newStyle)
            }
            /*for(var key in this.$refs.current.$el.dataset){
              style=style.replace("{","[data-"+key+"]{")
              break;
            }*/
            newStyle.id = "previewStyle";
            newStyle.innerHTML = style;
        },
        changeCheckStrictly(e) {
            let checked = e.target.checked ;
            this.checkStrictly = checked;
        },
        getData() {
            return this.$refs.current.getData(this, this.$refs.current);
        },
        onOk(vm) {
            vm.loading = false;
            Util.closeWindow(this, "ok", this.getData());
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
    }
}
</script>

<style scoped>

.fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    z-index: 800;
    background-color: #fff;
}

</style>
